<script setup>

</script>

<template>
  <svg width="512" height="712" viewBox="0 0 512 512" fill="none" overflow="hidden" xmlns="http://www.w3.org/2000/svg">
    <use href="#cube" x="128" y="220" stroke-width="2"  opacity="0.3">
      <animate attributeName="stroke" dur="6s" repeatCount="indefinite"
               values="#FF9AA2;#FFB7B2;#FFDAC1;#E2F0CB;#B5EAD7;#C7CEEA;#FF9AA2"/>
    </use>

    <rect width="512" height="512" y="384" fill="url(#fade)"/>
    <use href="#cube" x="128" y="28" stroke-width="2">
      <animate attributeName="stroke" dur="6s" repeatCount="indefinite"
               values="#FF9AA2;#FFB7B2;#FFDAC1;#E2F0CB;#B5EAD7;#C7CEEA;#FF9AA2"/>
    </use>

    <defs>
      <!-- EVERYTHING TOGETHER -->
      <g id="cube">
        <use href="#cube_outline" stroke-linejoin="round" stroke-width="16" fill="url(#stars)"/>
        <use href="#cube_base" stroke-width=".5"/>
        <use href="#cube_outline" stroke-linejoin="round" stroke-width="6" stroke="#141417"/>
      </g>

      <g id="cube_outline">
        <path>
          <animate attributeName="d" dur="1.5s" repeatCount="indefinite" calcMode="spline"
                   keyTimes="0;0.5;0.5;1"
                   keySplines="0.8 0.2 0.6 0.9;
						0.8 0.2 0.6 0.9;
						0.8 0.2 0.6 0.9"
                   values="M10 64 L128 0 L246 64 L246 192 L128 256 L10 192Z;
					M40 20 L216 20 L216 108 L216 236 L40 236 L40 172Z;
					M216 20 L40 20 L40 108 L40 236 L216 236 L216 172Z;
					M246 64 L128 0 L10 64 L10 192 L128 256 L246 192Z"/>
        </path>
      </g>

      <g id="cube_base">
        <path fill="#fff1"> <!-- TOP SIDE -->
          <animate attributeName="d" dur="1.5s" repeatCount="indefinite" calcMode="spline"
                   keyTimes="0;0.5;1"
                   keySplines="0.8 0.2 0.6 0.9;
						0.8 0.2 0.6 0.9"
                   values="M10 64 L128 0 L246 64 L128 128Z;
					M40 20 L216 20 L216 108 L40 108Z;
					M128 0 L246 64 L128 128 L10 64Z"/>
        </path>
        <path> <!-- LEFT SIDE -->
          <animate attributeName="d" dur="1.5s" repeatCount="indefinite" calcMode="spline"
                   keyTimes="0;0.5;0.5;1"
                   keySplines="0.8 0.2 0.6 0.9;
						0.8 0.2 0.6 0.9;
						0.8 0.2 0.6 0.9"
                   values="M10 64 L128 128 L128 256 L10 192Z;
					M40 20 L40 108 L40 236 L40 172Z;
					M216 20 L216 108 L216 236 L216 172Z;
					M246 64 L128 128 L128 256 L246 192Z"/>
          <animate attributeName="fill" dur="1.5s" repeatCount="indefinite" keyTimes="0;0.5;0.5;1"
                   values="#fff0;#fff0;#fff2;#fff2"/>
        </path>
        <path fill="#407080"> <!-- LEFT SIDE -->
          <animate attributeName="d" dur="1.5s" repeatCount="indefinite" calcMode="spline"
                   keyTimes="0;0.5;1"
                   keySplines="0.8 0.2 0.6 0.9;
						0.8 0.2 0.6 0.9"
                   values="M246 64 L128 128 L128 256 L246 192Z;
					M216 108 L40 108 L40 236 L216 236Z;
					M128 128 L10 64 L10 192 L128 256Z"/>
          <animate attributeName="fill" dur="1.5s" repeatCount="indefinite" keyTimes="0;0.5;1"
                   values="#fff2;#fff1;#fff0"/>
        </path>
      </g>
      <linearGradient id="fade" gradientTransform="rotate(90)">
      </linearGradient>
      <linearGradient id="sky" gradientTransform="rotate(90)">
        <stop offset="1" stop-color="#40354a"/>
      </linearGradient>

      <!-- STARS PATTERN -->
      <pattern id="stars" x="0" y="0" width="50%" height="50%" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
        <rect width="256" height="256" fill="url(#sky)"/>
        <use href="#star01" x="24" y="32"  fill="white"/>
        <use href="#star01" x="64" y="96"  fill="#ad9dcb" transform="rotate(90 80 112)"/>
        <use href="#star01" x="224" y="102"  fill="#ad9dcb"/>
        <use href="#star01" x="192" y="112"  fill="#E0E8EA" transform="rotate(90 80 112)"/>
        <use href="#star02" x="16" y="64"  fill="#ad9dcb"/>
        <use href="#star03" x="96" y="16"  fill="#E0E8EA"/>
        <use href="#star04" x="64" y="64"  fill="white"/>
        <use href="#star04" x="8" y="16"  fill="#ad9dcb"/>
        <use href="#star04" x="110" y="96"  fill="#E0E8EA"/>
        <use href="#star02" x="160" y="24"  fill="#ad9dcb"/>
        <use href="#star03" x="196" y="60"  fill="#E0E8EA"/>
        <use href="#star04" x="64" y="212"  fill="white"/>
        <use href="#star04" x="218" y="216"  fill="#ad9dcb"/>
        <use href="#star03" x="228" y="220"  fill="#E0E8EA"/>
        <use href="#star02" x="140" y="128"  fill="#ad9dcb"/>
        <use href="#star03" x="24" y="140"  fill="#E0E8EA"/>
        <use href="#star04" x="95" y="160"  fill="white"/>
        <use href="#star04" x="180" y="128"  fill="#ad9dcb"/>
        <use href="#star03" x="200" y="136"  fill="#E0E8EA"/>
        <use href="#star10" x="120" y="120"  stroke="#E0E8EA"/>
        <use href="#star11" x="48" y="64"  stroke="#ad9dcb"/>
      </pattern>
      <path id="star01" transform="scale(0.5)">
        <animate attributeName="d" dur="3s" repeatCount="indefinite" calcMode="spline"
                 keyTimes="0;0.5;1" keySplines="0.8 0.2 0.6 0.9; 0.8 0.2 0.6 0.9"
                 values="M16 0 Q16 16 24 16 Q16 16 16 32 Q16 16 8 16 Q16 16 16 0Z;
					M16 8 Q16 16 32 16 Q16 16 16 24 Q16 16 0 16 Q16 16 16 8Z;
					M16 0 Q16 16 24 16 Q16 16 16 32 Q16 16 8 16 Q16 16 16 0Z"/>
      </path>
      <circle id="star02">
        <animate attributeName="r" dur="3s" repeatCount="indefinite" calcMode="spline"
                 keyTimes="0;0.5;1" keySplines="0.8 0.2 0.6 0.9; 0.8 0.2 0.6 0.9"
                 values="0;2;0"/>
      </circle>
      <circle id="star03">
        <animate attributeName="r" dur="6s" repeatCount="indefinite" calcMode="spline"
                 keyTimes="0;0.5;1" keySplines="0.8 0.2 0.6 0.9; 0.8 0.2 0.6 0.9"
                 values="3;1;3"/>
      </circle>
      <circle id="star04" r="1"/>

      <path id="star10" stroke-width="2">
        <animate attributeName="d" dur="5s" repeatCount="indefinite"
                 keyTimes="0;0.90;0.97;1"
                 keySplines="0 0.4 1 0.2; 0 0.4 1 0.2; 0 0.4 1 0.2"
                 values="M64 0 L64 0Z; M64 0 L64 0Z; M48 12 L0 48Z; M0 48 L0 48Z"/>
        <animate attributeName="opacity" dur="5s" repeatCount="indefinite"
                 keyTimes="0;0.90;0.97;1"
                 values="1; 1; 0.6; 0"/>
      </path>
      <path id="star11" stroke-width="3">
        <animate attributeName="d" dur="6s" repeatCount="indefinite" delay="3s"
                 keyTimes="0;0.90;0.95;1"
                 keySplines="0 0.4 1 0.2; 0 0.4 1 0.2; 0 0.4 1 0.2"
                 values="M64 0 L64 0Z; M64 0 L64 0Z; M48 12 L0 48Z; M0 48 L0 48Z"/>
        <animate attributeName="opacity" dur="6s" repeatCount="indefinite" delay="3s"
                 keyTimes="0;0.90;0.95;1"
                 values="1; 1; 0.6; 0"/>
      </path>
    </defs>
  </svg>
</template>

<style>
body,html{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
}
svg{
  height: 100%;
  width: 100%;

}
</style>